<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!--    适配移动端-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--    网页图标-->
    <link rel="icon" href="images/title.ico">
    <!--    全局样式-->
    <link rel="stylesheet" href="css/reset.css">
    <!--    字体图标-->
    <link rel="stylesheet" href="css/iconfont.css">
    <!--    主体的样式-->
    <link rel="stylesheet" href="css/container.css">
    <!--    页脚的样式-->
    <link rel="stylesheet" href="css/footer.css">
    <!--    首页的样式-->
    <link rel="stylesheet" href="css/index.css">
    <style>  
        /* 通用样式 */  
        
        body {  
            font-family: 'Roboto', sans-serif;  
            font-size: 16px;  
            line-height: 1.6;  
        }  
  
        /* sj-item特定样式 */  
        .sj-item {  
            margin-bottom: 20px; 
            border: 1px solid #ddd;
            padding: 10px;  
        }  
  
        /* sj-top样式 */  
        .sj-top img {  
            max-width: 120px;  
            height: auto;  
            float: middle;  
            margin-right: 10px;  
        }  
        
  

        .restaurant-search-button {

    display: inline-block; 
    padding: 10px 20px;
    text-decoration: none;
    color: #fff; 
    background-color: #007bff; 
    border: none; 
    border-radius: 5px; 
    cursor: pointer; 
   
}
    </style>  
</head>

<body>

<!--导航开始-->
<div class="nav">
    <div class="title"><h1>A532牌订单小程序</h1></div>
  
    <div class="search">
        <a href="search.jsp" class="restaurant-search-button">
            <i class="iconfont"></i> 查询餐厅
        </a>
    </div>
</div>

<!--导航结束-->
<div class="clearHeight"></div>
<!--banner部分开始-->
<div class="banner">
    <img src="images/2.jpg" alt="">
   
</div>
<!--banner部分结束-->

<div class="message">
    <i class="iconfont"></i>
    <span>吃饱才有力气干活哟~</span>
</div>


<div >推荐餐厅</div>
<!--餐厅标题结束-->
<!--主体开始-->
<div class="container">  
    <%  
        String jdbcURL = "jdbc:mariadb://10.220.140.102:3366/studb11";  
        String username = "stua";  
        String password = "zHZUA65r";  
        Connection conn = null;  
        Statement stmt = null;  
        ResultSet rs = null;  
  
        try {  
            Class.forName("org.mariadb.jdbc.Driver");  
            conn = DriverManager.getConnection(jdbcURL, username, password);  
            stmt = conn.createStatement();  
            String sql = "SELECT * FROM restaurants";  
            rs = stmt.executeQuery(sql);  
  
            while (rs.next()) {  
                int restaurant_id = rs.getInt("restaurant_id");  
                String restaurant_name = rs.getString("name");  
                String restaurant_image = rs.getString("image_path");  
  
                 
    %>  

    <div class="sj-item">
    <div class="sj-top">
        <a href="order.jsp?restaurant_id=<%= restaurant_id %>">
           
            <img src="<%= restaurant_image %>" alt="<%= restaurant_name %>" onclick="showDishes(<%= restaurant_id %>)">
        </a>
        <div class="restaurant-info">
            <p>餐馆编号：<strong><%= restaurant_id %></strong></p>
            <p>餐馆名：<strong><%= restaurant_name %></strong></p>
           
        </div>
    </div>
</div>
    <%  
            }  
        } catch (Exception e) {  
            e.printStackTrace();  
        } finally {  
             
            try {  
                if (rs != null) rs.close();  
                if (stmt != null) stmt.close();  
                if (conn != null) conn.close();  
            } catch (Exception e) {  
                e.printStackTrace();  
            }  
        }  
    %>  
</div>  




<!--主体结束-->
<div class="clearHeight"></div>
<!--页脚开始-->
<div class="footer">

   <div>
        <a href="index.jsp">
            <i class="iconfont"></i>
            <p>首页</p>
        </a>
    </div>    
    <div>
        <a href="user.jsp">
            <i class="iconfont"></i>
            <p>用户登陆注册</p>
        </a>
    </div>
    
<button onclick="history.back()">返回</button>  
</div>
<!--页脚结束-->

</body>
</html>